/** @jsx jsx */
import React from 'react';
import { jsx } from 'theme-ui';
import { Link } from 'gatsby';
import { useDocs, useCurrentDoc } from 'docz';
import { get } from 'lodash/fp';

import * as styles from './styles';

const getHeadings = (route, docs) => {
  const doc = docs.find(doc => doc.route === route);
  const headings = get('headings', doc);
  return headings ? headings.filter(heading => heading.depth === 4) : [];
};

const getCurrentHash = () => {
  if (typeof window === 'undefined') {
    return '';
  }
  return window.location ? decodeURI(window.location.hash) : '';
};

export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
  const docs = useDocs();
  const current = useCurrentDoc();

  if (item.hidden) {
    return null;
  }

  const to = item.route;
  const headings = docs && getHeadings(to, docs);
  const isCurrent = item.route === current.route;
  const showHeadings = isCurrent && headings && headings.length > 0;
  const currentHash = getCurrentHash();
  return (
    <React.Fragment>
      <Link {...props} to={to} sx={styles.link} activeClassName="active" ref={ref} />
      {showHeadings &&
        headings.map(heading => (
          <Link
            key={heading.slug}
            to={`${to}#${heading.slug}`}
            sx={styles.smallLink}
            className={currentHash === `#${heading.slug}` ? 'active' : ''}
          >
            {heading.value}
          </Link>
        ))}
    </React.Fragment>
  );
});
